<template>
  <n-el class="wrapper">
    <div class="flicker"></div>
  </n-el>
</template>

<script setup lang="ts">

interface Border {
  color: string,
  width?: string | number,
}

export interface Props {
  size?: number,
  color?: string,
  border?: boolean | Border,
}

const props = withDefaults(defineProps<Props>(), {
  size: 24,
  border: true,
  color: 'var(--primary-color)'
})


const style = computed(() => {
  let border;
  if (typeof props.border === 'boolean') {
    border = { color: props.color, width: props.border ? '2px' : 0  }
  } else {
    const width = typeof props.border.width === 'string' ? props.border.width : `${props.border.width}px`
    border = { width, color: props.border.color }
  }
  return {
    wrapperSize: `${props.size}px`,
    color: props.color,
    size: props.border ? `${props.size - 4}px` : `${props.size}px`,
    border,

  }
})

</script>

<style lang="css" scoped >
.wrapper {
  width: v-bind('style.wrapperSize');
  height: v-bind('style.wrapperSize');
  min-height: v-bind('style.wrapperSize');
  max-height: v-bind('style.wrapperSize');
  min-width: v-bind('style.wrapperSize');
  max-width: v-bind('style.wrapperSize');
  border-color: v-bind('style.border?.color');
  border-width: v-bind('style.border?.width');
  border-radius: 50%;
  border-style: solid;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .flicker {
  width: v-bind('style.size');
  height: v-bind('style.size');
  border-radius: 50%;
  background-color: v-bind('style.color');
  animation: flicker 1s ease-out 0s infinite;
}

@keyframes flicker {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }

  /* 25% {
    transform: scale(0.6);
    opacity: .9;
  }

  50% {
    transform: scale(0.8);
    opacity: .8;
  }

  75% {
    transform: scale(1);
    opacity: .7;
  } */

  100% {
    transform: scale(1);
    opacity: .7;
  }
}

</style>
